<template>
  <h2>弹出框组件</h2>
  <el-popover
      placement="top-start"
      title="Title"
      :width="200"
      trigger="hover"
      content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="m-2">Hover to activate</el-button>
    </template>
  </el-popover>

  <el-popover
      placement="bottom"
      title="Title"
      :width="200"
      trigger="click"
      content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="m-2">Click to activate</el-button>
    </template>
  </el-popover>

  <el-popover
      ref="popover"
      placement="right"
      title="Title"
      :width="200"
      trigger="focus"
      content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="m-2">Focus to activate</el-button>
    </template>
  </el-popover>

  <el-popover
      ref="popover"
      title="Title"
      :width="200"
      trigger="contextmenu"
      content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="m-2">contextmenu to activate</el-button>
    </template>
  </el-popover>

  <el-popover
      :visible="visible"
      placement="bottom"
      title="Title"
      :width="200"
      content="this is content, this is content, this is content"
  >
    <template #reference>
      <el-button class="m-2" @click="visible = !visible"
      >Manual to activate</el-button
      >
    </template>
  </el-popover>

  <h2>自己的弹出框</h2>
  <el-popover
      title="欢迎访问XXX网站"
      :width="200"
  >
    <!--      写在template里面的是初始显示的内容,其他内容为弹出后显示的内容-->
    <template #reference>
      <el-icon size="50"><User/></el-icon>
    </template>
    <div style="text-align: center">
      <el-button type="info">注册</el-button>
      <el-button type="warning">登录</el-button>
    </div>
  </el-popover>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<style scoped>
.el-button + .el-button {
  margin-left: 8px;
}
</style>
